<template>
  <div class="item bg-[#f7f7f7] p-[12px] mb-[10px] cursor-pointer"
       v-debounce="{callback: addItem , params: { type:'info'},delay:500}">
    <a-typography>
      <a-typography-title :level="3" class="pb-[10px]">问卷标题</a-typography-title>
      <a-typography-paragraph>
        问卷描述
      </a-typography-paragraph>
    </a-typography>
  </div>
  <div class="item bg-[#f7f7f7] p-[12px] mb-[10px] cursor-pointer"
       v-debounce="{callback: addItem , params: { type:'title'},delay:500}">
    <a-typography>
      <a-typography-title :level="3" class="text-left">一行标题</a-typography-title>
    </a-typography>
  </div>
  <div class="item bg-[#f7f7f7] p-[12px]  mb-[10px] cursor-pointer"
       v-debounce="{callback: addItem , params: { type:'paragraph'},delay:500}">
    <a-typography-paragraph class="text-left" style="margin-bottom: 0">
      一行段落
    </a-typography-paragraph>
  </div>
</template>

<script setup>
import useQuestion from "../../../store/question.js";
import {uuid} from "vue-uuid";
import {storeToRefs} from "pinia";

const questionStore = useQuestion()
let {activeIndex,componentList} = storeToRefs(questionStore)
const infoObj = {
  "type": "questionInfo",
  "title": "问卷信息",
  "isHidden": false,
  "isLocked": false,
  "props": {
    "title": "问卷标题",
    "desc": "问卷描述"
  }
}
const titleObj = {
  "type": "questionTitle",
  "title": "标题",
  "isHidden": false,
  "isLocked": false,
  "props": {
    "text": "一行标题",
    "level": 1,
    "isCenter": false
  }
}
const paragraphObj = {
  "type": "questionParagraph",
  "title": "段落",
  "isHidden": false,
  "isLocked": false,
  "props": {
    "text": "一行段落",
    "isCenter": false
  }
}
const addItem = ({type}) => {
  let id = uuid.v1()
  questionStore.changeEditKey('1')
  let preVal = JSON.parse(JSON.stringify(componentList.value))
  questionStore.addSnapshots({
    type: 'add',
    data: preVal
  })
  switch (type) {
    case 'info':
      questionStore.componentList.splice(activeIndex.value + 1, 0, {
        "fe_id": id,
        ...infoObj
      })
      questionStore.changeId(id)
      break;
    case 'title':
      questionStore.componentList.splice(activeIndex.value + 1, 0, {
        "fe_id": id,
        ...titleObj
      })
      questionStore.changeId(id)
      break;
    case 'paragraph':
      questionStore.componentList.splice(activeIndex.value + 1, 0, {
        "fe_id": id,
        ...paragraphObj
      })
      questionStore.changeId(id)
      break;
  }
}
</script>

<style scoped>
h3 {
  margin-bottom: 0 !important;
}

.item {
  border: 1px solid #fff;
}

.item:hover {
  border: 1px solid #d9d9d9;
}
</style>
